<template>
  <div>
    <Head :head="head" @greet="greet"></Head>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="1000px"
      center>
      <div class="left_essential base">
        <img src="/static/assets/img/dtx1.png" alt="">
        <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible1':nowIndex == index}" :key="c.index">{{ c.name }}</p>
      </div>
      <div class="right_essential" v-if="temp1 == 1">
        <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
        <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
        <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
        <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
        <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
        <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
      </div>
      <div class="right_essential" v-if="temp1 == 2">
        <p>您的安全服务</p>
        <div><p><span class="width_user">用户名</span>{{user}}</p></div>
        <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
        <div><p><span>绑定手机</span>{{user}}</p></div>
        <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
      </div>
      <div class="both"></div>
    </el-dialog>
    <el-container class="right_bgcolor">
      <div class="bgcolor" style="width: 100%;">
        <left-top :active="2"></left-top>
        <el-main>
          <el-row>
            <el-col :span="14">
              <div v-if="temp"><img src="/static/assets/img/country.png" width="100%"></div>
              <div v-if="!temp"><img src="/static/assets/img/provincea.png" width="100%"> </div>
            </el-col>
            <el-col :span="10" style="text-align: right;">
              <div @click="pass(true)"><img src="/static/assets/img/pass_auth.png" width="85%" height="20%"></div>
              <div @click="pass(false)"><img src="/static/assets/img/jsjd.png" width="85%" height="20%"></div>
              <div><img src="/static/assets/img/jsjd_6.png" width="85%" height="20%"></div>
            </el-col>
          </el-row>
        </el-main>
      </div>
    </el-container>
  </div>
</template>

<script>
import Head from '@/components/Head'
import LeftTop from '@/components/Left'
export default {
  data () {
    return {
      temp: true,
      temp1: 1,
      nowIndex: 0,
      centerDialogVisible: false,
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      user: '543759843@qq.com',
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: '江苏省胸痛中心建设地图实时动态',
        name: '刘冰冰 ',
        methods: 'greet'
      }
    }
  },
  components: {
    Head,
    LeftTop
  },
  methods: {
    greet: function () {
      this.centerDialogVisible = true
    },
    pass: function (str) {
      this.temp = str
    },
    sorts (event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    }
  }
}
</script>

<style scoped>
  body > .el-container {
    margin-bottom: 40px;
  }
  .top_qi{
    line-height: 37px;
  }
  .right_bgcolor{
    padding: 20px 20px 20px 0;
    background-color: #f2f2f2;
  }
  .right_bottom div{
    margin-top: 50px;
    line-height: 25px;
  }
  /*标题*/
  .grad h1{
    float: left;
    line-height: 60px;
    color: #ffff;
    font-size: 25px;
  }
  /*右边图标*/
  .grad img{
    margin-left: 30px;
    margin-top: 38px;
  }
  /*版本 时间点击弹出事件*/
  .version{
    display: inline-flex;
    float: right
  }
  hr{color:#f2f2f2}
  .sub-card{
    position: absolute;
    z-index: 100;
    top: 80px;
    height: 392px;
    width: 480px;
    right: 0;
    line-height: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
  }
  .sub-tip{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 0px solid white;
    transition: border-bottom-width 120ms ease-out;
  }
  .btn{
    border:1px solid #fff;
    color:#fff;
    background-color: #1086FD;
    width: 70px;
    height: 30px;
    border-radius: 25px;
  }
  .rotate{
    transition: transform .3s;
  }
  .none_black{
    border-bottom: 1px solid #ddd;
    margin-right: 5px;
  }
  .bgcolor{
    background-color: #fff;
  }
  .detail{
    background: #CCCCCC;
    width: 70px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
  }
  .bettew_top{
    line-height: 40px;
  }
  .el-main{
    margin-left: 9%;
  }
</style>
